<template>
  <!-- 搜索 -->
  <div class="box">
    <div class="search">
      <div>
        <input
          type="text"
          :autofocus="ipt"
          @keyup.enter="end"
          v-model="val"
          placeholder="请输入漫画关键词..."
        />
        <span></span>
        <slot></slot>
      </div>
    </div>
    <!-- 搜索结果 -->
    <div class="end"><searchEnd :msg="msg" :isShow="isShow"></searchEnd></div>
  </div>
</template>

<script>
import searchEnd from "@/components/SearchEnd";
import { get } from "@/http/request.js";

export default {
  name: "Search",
  components: {
    searchEnd,
  },
  data() {
    return {
      val: "",
      msg: [],
      isOpen: true,
      isShow: false,
    };
  },
  props: ["ipt"],
  methods: {
    async end() {
      this.isOpen = false;
      this.isShow = true;
      this.$emit("item-tap", this.isOpen);
      await get(
        `https://apis.netstart.cn/bcomic/Search?styleId=-1&areaId=-1&isFinish=-1&order=-1&pageNum=1&pageSize=15&isFree=-1&keyWord=${this.val}`
      ).then((data) => {
        if (data && data.code === 0) {
          // console.log("搜索", data);
          this.msg = data.data.list;
        }
      });
      this.isShow = false;
    },
  },
  mounted() {
    this.isOpen = true;
  },
};
</script>

<style lang='scss' scoped>
@import "@/static/common/base.scss";

// 搜索
$p: 4vw 4vw 1.5vw;
.box {
  .search {
    width: 100%;
    padding: $p;
    background-color: $bgc;
    div {
      position: relative;
      display: flex;

      // margin-bottom: 3vw;

      input {
        width: 100%;
        border: 0;
        height: 6.9333vw;
        background-color: #fff;
        // color: #000;
        opacity: 0.6;
        border-radius: 3.4667vw;
        padding-left: 6.6667vw;
        font-size: 3.2vw;
        // font-weight: 600;
      }
      span {
        display: block;
        width: 2.6667vw;
        height: 2.6667vw;
        // background-color: #000;
        background: url("../assets/搜索小.png") no-repeat center;
        background-size: 100%;
        position: absolute;
        left: 2vw;
        top: 2vw;
      }
      a {
        white-space: nowrap;
        line-height: 6.9333vw;
        padding-left: 2vw;
        font-size: 3.7333vw;
      }
    }
  }
  .end {
    padding: 0 4vw;
  }
}
</style>